<script setup lang="ts">
defineOptions({
  name: "Choose",
});

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  desc: {
    type: String,
    default: "",
  },
  bg: {
    type: String,
    default: "", // 可以是颜色值（如 #ffffff）或背景图片 URL
  },
  titleClass: {
    type: String,
    default: "text-white", // 默认字体颜色
  },
  descClass: {
    type: String,
    default: "text-white", // 默认字体颜色
  },
});

// 计算属性：动态生成背景样式
const backgroundStyle = computed(() => {
  if (props.bg.startsWith("url")) {
    return {
      background: `${props.bg} no-repeat`, // 添加 no-repeat
      backgroundSize: "cover", // 确保背景图片覆盖整个区域
      backgroundPosition: "center", // 背景图片居中
    };
  } else {
    return {
      backgroundColor: props.bg, // 设置背景颜色
    };
  }
});
</script>

<template>
  <div class="choose-bg" :style="backgroundStyle">
    <div class="w-[1400px] flex flex-col mx-auto">
      <div class="py-6">
        <div class="text-center text-3xl" :class="[titleClass]">
          {{ title }}
        </div>
        <div class="text-center text-base mt-2" :class="[descClass]">
          {{ desc }}
        </div>
        <div class="mt-6">
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// .choose-bg {
//   background: url("/assets/images/bg/choose-bg.png") no-repeat;
// }
</style>
